<template>
  <div class="top_warp" v-on:dblclick="hitMax">
      <div class="logo" v-on:mousedown="hitCaption">
        <div style="font-size:18px;">HeckMonit</div>
        <div style="margin-left:100px;">
        </div>
      </div>
      <div class="tool">
        <div class="tools" v-on:click="$router.push('/setting')">
          <iconpark-icon name="setting-two"></iconpark-icon>
        </div>
        <div class="tools" v-on:click="$router.push('/message')">
          <iconpark-icon name="mail"></iconpark-icon>
        </div>
        <div class="tools" v-on:click="$router.push('/about')">
          <iconpark-icon name="info"></iconpark-icon>
        </div>
        <div style="margin-left:20px;border-right:1px solid #cdcdcd;width:10px;height:15px;"> </div>
        <div class="tools" v-on:click="hitMin">
          <iconpark-icon name="minus"></iconpark-icon>
        </div>
        <div class="tools" v-on:click="hitMax">
          <iconpark-icon name="full-screen-two"></iconpark-icon>
        </div>
        <div class="tools" v-on:click="hitClose">
          <iconpark-icon name="close"></iconpark-icon>
        </div>
      </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            
        }
    },
    methods:{
        handleMouse(e){
            e.preventDefault();
        },
        hitCaption(){
            aardio.hitCaption()
        },
        hitMin(){
            aardio.hitMin()
        },
        hitMax(){
            aardio.hitMax()
        },
        hitClose(){
            aardio.hitClose()
        }
    }
}
</script>
<style scoped>
.top_warp{
  display: flex;
  height:50px;
  background-color: #282B33;
  justify-content: space-between;
  align-items: center;
  position:fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  
}

.tool{
  margin-right:20px;
  color:#fff;
  display: flex;
  align-items:center;
}

.tools{
  margin-left:25px;
  cursor: pointer;
  padding-top:3px;
  /* padding:2px; */
  font-size:14px;
  color:#adb0b8;
}

.tools:hover{
  /* background-color: #E33E3E; */
  color:#ffffff;
}

.logo{
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  /* margin-left: 20px; */
  width: 800px;
  display: flex;
  align-items: center;
}

.logo input{
  background-color: #E33E3E;
  border: 0px;
  padding:5px 8px;
  color:#fff;
  font-size: 16px;
  line-height: 20px;
}

.logo input:focus{
  background-color: #E33E3E;
  border: 0px !important;
}
</style>